<template>
  <div class="rechargeContanier">
    <div class="popupMask" v-if="refundDialog">
      <div class="popupDialog">
        <div class="popupTitle">退余额提醒</div>
        <div class="popupContent">
          <div>您有一笔退余额申请正在处理中。</div>
          <div>
            <span>退余额：</span>
            <span>{{ refundText.balance }}元</span>
          </div>
          <div>
            <span>需清空的赠送余额：</span>
            <span>{{ refundText.giveBalance }}元</span>
          </div>
          <div>
            <span>退至支付宝：</span>
            <span>{{ refundText.refundAccount }}</span>
          </div>
        </div>
        <div class="divider"></div>
        <div class="popupButton">
          <div
            class="buttonItem"
            style="color: #576b95"
            hover-class="buttonItemHover"
            @click="popupConfirm"
          >
            我知道了
          </div>
        </div>
      </div>
    </div>
    <div class="recharge" v-if="!free">
      <div class="remainder">
        <img class="leftIcon" src="../../images/icon@3x.png" />
        <div class="remainderNum">
          <div class="currentRemainder">{{ remainder }}</div>
          <div class="currentTip">车费余额(元)</div>
        </div>
      </div>
      <!-- 充值标题 -->
      <div class="rechargeTitle">充值金额</div>
      <!-- 充值金额选择 -->
      <div class="selectAmount">
        <button
          @click="selectRechargeNum"
          v-for="(item, idx) in rechargeLists"
          :key="item.id"
          :data-id="idx"
          :class="[selectId === idx ? 'selected' : 'unSelect']"
        >
          <div style="font-weight: bold">{{ item.money }}元</div>
          <div
            style="font-size: 12px; color: #ff6e2a"
            v-if="item.givemoney > 0 && item.leadApp"
          >
            APP充值送{{ item.givemoney }}元
          </div>
          <div
            style="font-size: 12px; color: #ff6e2a"
            v-if="item.givemoney > 0 && !item.leadApp"
          >
            送{{ item.givemoney }}元
          </div>
        </button>
      </div>
      <!-- 充值说明信息 -->
      <div class="rechargeIntro">
        <div>
          点击去充值，即表示已阅读
          <span class="rechargeAgreement" @click="viewAgreement"
            >《充值协议》</span
          >
        </div>
        <div style="margin-top: 5px">
          小遛不会以任何形式要求您输入银行账户和密码
        </div>
      </div>
      <!-- 按钮 -->
      <div
        class="weui-btn_area"
        style="padding-bottom: 22px"
        @click="rechargeOpts"
      >
        <button class="rechargebtn">充值</button>
      </div>

      <div
        class="customer"
        style="color: #a4a4a4; margin-top: 10px"
        v-if="depositTipShow"
      >
        活动期间 免押骑行
      </div>
    </div>
    <div class="free" v-if="free">
      <div class="topArea">
        <img class="freeIcon" src="../../images/icon@3x.png" />
        <div class="freeTip">钱包可用余额(元)</div>
        <div class="freeRemainder">
          <span>{{ remainder }}</span>
          <!--  <div class="refundButton" v-if="canRefundBalance" @click="refundBalance">
                            {{refundButtonText}}
                        </div>-->
        </div>
        <div class="rowGather">
          <div class="itemGather">
            <span>本金余额(元)</span>
            <span class="money">{{ cash }}</span>
          </div>
          <div class="itemGather">
            <span>赠送余额(元)</span>
            <span class="money">{{ givebalance }}</span>
          </div>
          <div class="itemGather" v-if="returnmoney">
            <span>领养赠送(元)</span>
            <span class="money">{{ returnmoney }}</span>
          </div>
          <div class="itemGather" v-if="credit">
            <span>信用账户(元)</span>
            <span class="money">{{ credit }}</span>
          </div>
        </div>
        <div class="frozen" v-if="freezeMoney">
          <span>冻结金额(元)</span>
          <span class="frozenMoney">{{ freezeMoney }}</span>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="weui-btn_area" style="width: 100%; margin-bottom: 20px">
        <!--<button class="freebtn" @click="changeStatus">充值</button>-->
      </div>

      <div class="my-area" v-if="hasDepositCard">
        <img src="../../images/myArea@3x.png" />
        <div class="textArea">
          <div class="top">免押试骑:剩余{{ depositCardRemains }}次</div>
          <div class="mid">无需缴纳押金，即可体验小遛</div>
          <span class="bottom" v-if="depositCardArea"
            >使用区域: {{ depositCardArea }}</span
          >
          <span class="bottom" v-else>使用区域:不限（请在运营区域内骑行）</span>
        </div>
      </div>

      <div class="my-area" v-if="hasDepositBenefit">
        <img src="../../images/myArea@3x.png" />
        <div class="textArea">
          <div class="top">免押骑行</div>
          <div class="mid">无需缴纳押金，即可体验小遛</div>
          <span class="bottom" v-if="depositBenefitArea">
            使用区域: {{ depositBenefitArea }}
          </span>
          <span class="bottom" v-else
            >使用区域: 不限（请在运营区域内骑行）</span
          >
        </div>
        <span class="bottom_right">{{ depositBenefitEndTime }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import recharge from "./recharge.js";

export default {
  mixins: [recharge],
  data() {
    return {};
  },
};
</script>
<style scoped lang="stylus">
@import './recharge.styl';
</style>
